<template>
    <div class="us">
        <div class="us-bg">
            <div class="title w">
                <span>感谢您对剑鱼开放平台的关注</span>
                <span>欢迎洽谈合作</span>
            </div>
        </div>
        <div class="us-title">
            <span class="line-a"></span>
            <span class="line-b"></span>
            <span>联系我们</span>
            <span class="line-b"></span>
            <span class="line-a"></span>
        </div>
        <div class="us-content">
            <div class="us-box">
                <div class="us-img qr">
                    <img :src="qr" alt="二维码">
                </div>
                <div class="us-text c-3">
                    扫码关注“剑鱼招标订阅”公众号
                    <br>
                    回复“客服”联系我们
                </div>
            </div>
            <a class="us-box" href="tel:400-108-6670">
                <div class="us-img">
                    <i class="iconfont icon-dianhua4"></i>
                </div>
                <div class="us-text">
                    <span class="s-2">联系电话</span>
                    <br>
                    <span class="s-1">400-108-6670</span>
                </div>
            </a>
            <a class="us-box" href="mailto:bd@topnet.net.cn">
                <div class="us-img">
                    <i class="iconfont icon-youxiang"></i>
                </div>
                <div class="us-text">
                    <span class="s-2">公司邮箱</span>
                    <br>
                    <span class="s-1">bd@topnet.net.cn</span>
                </div>
            </a>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'us',
    data: function () {
      return {
        qr: '/jyop/qr/' + window.localStorage.getItem("qrCodeKey")
      }
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {
      this.$bus.$emit('footShow', false)
    }, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {} // 函数
  }
</script>
<style lang='scss'>
    .us {
        box-sizing: border-box;
        .us-bg {
            background: url("../assets/us.png") no-repeat 0 0;
            height: 315px;
            width: 100%;
            background-size: 102% 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            .title {
                font-size: 40px;
                line-height: 57px;
                color: white;
                text-align: left;
                span {
                    display: block;
                }
            }
        }
        .us-title {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            height: 144px;
            .line-a {
                width: 490px;
                height: 1px;
                background-color: #d3d3d3;
            }
            .line-b {
                height: 10px;
                width: 10px;
                box-sizing: border-box;
                border: 2px solid #50c3d3;
                transform: rotate(45deg);
                position: relative;
                margin: 0 25px;
            }
            span {
                font-size: 26px;
                color: #2cb7ca;
            }
        }
        .us-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin: 0 0 60px 0;
            .us-box {
                width: 394px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                &:nth-child(2) {
                    border-right: 1px solid #d3d3d3;
                    border-left: 1px solid #d3d3d3;
                }
                .us-img {
                    i {
                        font-size: 64px;
                        color: #2cb7ca;
                        line-height: 147px;
                    }
                }
                .us-text {
                    text-align: center;
                }
            }
        }
        .qr {
            width: 164px;
            height: 164px;
            background-color: #dadada;
            img {
                width: 164px;
                height: 164px;
            }
        }
        .c-3 {
            font-size: 14px;
            color: #333333;
            text-align: center;
            line-height: 24px;
            margin-top: 21px;
        }
        .s-2 {
            font-size: 20px;
            color: #333333;
            line-height: 64px;
        }
        .s-1 {
            font-size: 16px;
            color: #666666;
            line-height: 30px;
            padding-bottom: 12px;
        }
    }
</style>
